<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏后的标题（iOS 6 新增） -->
    <meta name="apple-mobile-web-app-capable" content="yes"><!-- 是否启用 WebApp 全屏模式 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="white-translucent">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>首页--推荐试用</title>
    <link rel="stylesheet" href="css/mobile_reset.css">
    <link rel="stylesheet" href="css/mui.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/modal_alert.css">
    <link rel="stylesheet" href="css/footerNav_common.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/bind_taomao_modal.css">
    <script>
        (function () {
            document.addEventListener('DOMContentLoaded', function () {
                var html = document.documentElement;
                var windowWidth = html.clientWidth;
                html.style.fontSize = windowWidth / 7.5 + 'px';
                // 等价于html.style.fontSize = windowWidth / 750 * 100 + 'px';
            }, false);


        })();

        // 这个7.5就是根据设计稿的横向宽度来确定的，假如你的设计稿是640
        // 那么 html.style.fontSize = windowWidth / 6.4 + 'px';
    </script>
</head>
<body>

    <!--推荐试用-->
    <div class="recommend-try">
        <!--推荐试用商品-->
        <div class="recommend-try-goods">
            <ul>
                <li>
                <a href="detail.html">
                    <img src="images/poster_bg_poster01_default@2x.png " />
                </a>
                <div class="goods-description">
                    <p class="one">花谢花飞花满天，红消香断有谁怜。</p>
                    <p class="two">
                        <span>价值：<b>&yen;288.00</b></span>
                        <span class="pinkage">包邮</span>
                    </p>
                    <p class="three">
                        <span>限量：<b>10份</b></span>
                        <span class="applyFor">已申请<b>1000份</b></span>
                    </p>
                </div>
            </li>
                <li>
                    <a href="detail.html">
                        <img src="images/poster_bg_poster01_default@2x.png " />
                    </a>
                    <div class="goods-description">
                        <p class="one">花谢花飞花满天，红消香断有谁怜。</p>
                        <p class="two">
                            <span>价值：<b>&yen;288.00</b></span>
                            <span class="pinkage">包邮</span>
                        </p>
                        <p class="three">
                            <span>限量：<b>10份</b></span>
                            <span class="applyFor">已申请<b>1000份</b></span>
                        </p>
                    </div>
                </li>

                <li>
                    <a href="detail.html">
                        <img src="images/poster_bg_poster01_default@2x.png " />
                    </a>
                    <div class="goods-description">
                        <p class="one">花谢花飞花满天，红消香断有谁怜。</p>
                        <p class="two">
                            <span>价值：<b>&yen;288.00</b></span>
                            <span class="notPinkage">付邮</span>
                        </p>
                        <p class="three">
                            <span>限量：<b>10份</b></span>
                            <span class="applyFor">已申请<b>1000份</b></span>
                        </p>
                    </div>
                </li>
                <li>
                    <a href="detail.html">
                        <img src="images/poster_bg_poster01_default@2x.png " />
                    </a>
                    <div class="goods-description">
                        <p class="one">花谢花飞花满天，红消香断有谁怜。</p>
                        <p class="two">
                            <span>价值：<b>&yen;288.00</b></span>
                            <span class="pinkage">包邮</span>
                        </p>
                        <p class="three">
                            <span>限量：<b>10份</b></span>
                            <span class="applyFor">已申请<b>1000份</b></span>
                        </p>
                    </div>
                </li>

                <li>
                    <a href="detail.html">
                        <img src="images/poster_bg_poster01_default@2x.png " />
                    </a>
                    <div class="goods-description">
                        <p class="one">花谢花飞花满天，红消香断有谁怜。</p>
                        <p class="two">
                            <span>价值：<b>&yen;288.00</b></span>
                            <span class="notPinkage">付邮</span>
                        </p>
                        <p class="three">
                            <span>限量：<b>10份</b></span>
                            <span class="applyFor">已申请<b>1000份</b></span>
                        </p>
                    </div>
                </li>
                <li>
                    <a href="detail.html">
                        <img src="images/poster_bg_poster01_default@2x.png " />
                    </a>
                    <div class="goods-description">
                        <p class="one">花谢花飞花满天，红消香断有谁怜。</p>
                        <p class="two">
                            <span>价值：<b>&yen;288.00</b></span>
                            <span class="pinkage">包邮</span>
                        </p>
                        <p class="three">
                            <span>限量：<b>10份</b></span>
                            <span class="applyFor">已申请<b>1000份</b></span>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!--关注我们-->
    <div class="follow_us">
        <img src="images/follow_us/gz_icon_liwu_default@2x.png" alt="">
    </div>
    <!--页面底部导航条-->
    <footer id="nav"></footer>

    <!--关注我们弹框-->
    <div class="modal_box followUs_box">
        <div class="modal_content">
            <div class="main">
                <p><img src="images/follow_us/gz_tc_bg_ewm1_deafult@2x.png" alt=""></p>
            </div>
            <p class="close"><img src="images/follow_us/gz_icon_off_default@2x.png" alt=""></p>
        </div>
        <div class="mask_layer"></div>
    </div>
<!--弹框-->
    <div class="modal_box">
        <div class="modal_content">
            <p class="hint">
                <span>关联淘宝会员名</span>
                <img class="close" src="images/tc_icon_off_default.png" alt="">
            </p>
            <h1 class="title">请按照下述步骤在手机淘宝找到淘宝会员名并填写:</h1>
            <div class="notice">
                <div class="left notice_title">注意：</div>
                <div class="left notice_content">
                    <p>1.淘宝会员名影响商品领取，请认真填写；</p>
                    <p>2.关联的淘宝会员名注册需要超过3个月且信<br/> &nbsp;&nbsp; 誉等级在两颗红心以上。</p>
                </div>
            </div>
            <div class="new-try-goods">
                <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                    <div class="mui-scroll">
                        <div class="mui-control-item">
                            <a class="first" href="#">
                                <img src="images/bdtb_bg_01_default.png " />
                            </a>
                            <div class="goods-description">
                                <p class="one">打开手机淘宝 - 找到我的淘宝 - 点击头像</p>
                            </div>
                        </div>
                        <div class="mui-control-item">
                            <a class="second" href="#">
                                <img src="images/bdtb_bg_02_default.png " />
                            </a>
                            <div class="goods-description">
                                <p class="one">进入个人资料 - 找到会员名 - 填写会员名</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <p class="number_name"><input type="text" placeholder="请填写淘宝会员名" ></p>
            <p class="btns">
                <input type="button" value="提交">
                <input class="close" type="button" value="取消">
            </p>
        </div>
        <div class="mask_layer"></div>
    </div>
</body>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/mui.js"></script>
<script src="js/index_tab.js"></script>
<script src="js/alert.js "></script>
<script type="text/javascript" charset="utf-8">
    //    取消禁止a标签的跳转
    mui('body').on('tap','a',function(){document.location.href=this.href;});
    $(function(){
        $('#nav').load('footer_nav.html',function(){
            $('#index').find('img').attr('src','images/bottom_icon_home_selected@2x.png');
            $('#index').addClass('mui-active');
        });
        $('.follow_us').on('tap',function(){
            $('.followUs_box').css('display','block')
        })
    })
</script>
</html>